﻿@page "/Rating"
@using FluentUI.Demo.Shared.Pages.Rating.Examples

<PageTitle>@App.PageTitle("Rating")</PageTitle>

<h1>Rating</h1>

<p>
    A <code>&lt;FluentRating&gt;</code> component allows users to provide a rating for a particular item.
    <code>&lt;FluentRating&gt;</code> allows customers to determine a sense of value of a good or a service.
    By default, the rating is selected out of 5 stars, but the number and symbol used can be customized.
</p>


<h2 id="a11y">Accessibility</h2>
<p>
    You can use the arrow keys to increase (<kbd>&rarr;</kbd> / <kbd>&uarr;</kbd>) or decrease (<kbd>&larr;</kbd> / <kbd>&darr;</kbd>) the value.
</p>

<h2 id="example">Examples</h2>

<DemoSection Title="Default" Component="@typeof(RatingDefault)"></DemoSection>

<DemoSection Title="Customization" Component="@typeof(RatingCustomization)"></DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentRating)" />
